<template>
  <el-dialog title="合同详情" :visible.sync="dialogVisible" :close-on-click-modal="false" width="850px">
    <div v-if="viewData.signUser">
      <el-descriptions :column="1" border>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            合同名称
          </template>
          {{ viewData.contractName }}
          <el-tag v-if="viewData.status==3" type="danger">已撤销</el-tag>
          <div style="color: red;" class="tip" v-if="viewData.status==1">
                如签署人未收到签署短信，请将签署链接发送给签署人进行签署合同！
              </div>
        </el-descriptions-item>
        <el-descriptions-item :label="'签署人'+(i+1)" v-for="(item,i) in viewData.signUser" :key="item.idCard">

          <div style="line-height: 30px;">
            <div>
              <span>姓名：</span>
              <span>{{  item.companyName||item.name }}</span>
            </div>
            <div>
              <span>签署链接：</span>
              <a style="color: cornflowerblue;" :href="item.signUrl" target="_blank">{{ item.signUrl }}</a>

              <el-button plain style="margin-left: 10px;" @click="copy(item)" size="mini" type="primary" >复制</el-button>
            </div>
            <div>
              <span>签署状态：</span>
              <el-tag :type="commonMaps.hetongStatusMap[item.signStatus||1].type">{{ commonMaps.hetongStatusMap[item.signStatus||1].name }}</el-tag>
              
            </div>
            <div v-if="item.signStatus==2">
              <span>签署时间：</span>
              <span>{{ item.signFinishedTime }}</span>
            </div>
          </div>

        </el-descriptions-item>

      </el-descriptions>
    </div>
    <div v-else style="height: 400px;" v-loading="loading">

    </div>
  </el-dialog>
</template>

<script>
import contractApi from "../../api/B2Cmanage/fadada";
export default {
  name: "",
  components: {},
  data() {
    return {
      dialogVisible: false,
      loading: false,
      viewData: {},
      contractId: "",
    };
  },
  created() {},
  methods: {
    // 打开弹窗
    open(contractId) {
      this.contractId = contractId;
      this.viewData = {}
      this.getContract();
      this.dialogVisible = true;
    },
    // 查询合同信息
    getContract() {
      this.loading =true
      contractApi.getcontractInfoById(this.contractId).then((res) => {
        this.loading =false
        if (res.data) {
          const signUserObj = JSON.parse(res.data.signUser);
          this.viewData = { ...res.data, signUser: signUserObj };
        }
      });
    },
    copy(item){
      // const str=`签署人名称: ${item.companyName||item.name}\n签署链接: ${item.signUrl}`
      const str=`${item.signUrl}`
      this.$copyText(str).then(() => {
        this.$message.success("已复制到剪切板");
      });
    },
    close() {
      this.dialogVisible = false;
    },
  },
};
</script>
